<template>
  <div class="headerWrap">
    <div class="header">
      <div class="containerWid">
        <div class="hleft">
          <router-link
            class="logo"
            to="/"
          >
            <!-- <img src="@/assets/logo1.png"> -->
            </router-link>
            <div class="header-menu">
              <router-link to="/course">
                <span>技术课程</span>
              </router-link>
            </div>
            <div class="searchBox">
              <input
                type="text"
                placeholder="请输入关键字..."
              >
                <div class="searchBtn">
                  <i class="el-icon-search"></i>
                </div>

            </div>
        </div>
        <div class="hright">
          <router-link to="/vip">
            <span>成为VIP</span>
          </router-link>
          <div
            v-if="userToken || storageToken"
            class="sc"
          >
            <router-link to="/order">
              <span>我的订单</span>
            </router-link>
            <el-popover
              placement="top"
              trigger="hover"
            >
              <ul class="userUl">
                <li>
                  <router-link to="/balance">我的余额</router-link>
                </li>
                <li @click="loginOut">退出登录</li>
              </ul>
              <div
                class="userFace"
                slot="reference"
              ><img src="@/assets/img/face.jpg"></div>
        </el-popover>
      </div>
      <span
        class="login"
        @click="loginFormVisible = true"
        v-else
      >登录</span>
    </div>
  </div>
  </div>
  <!-- 登录 -->
  <div class="loginBox">
    <el-dialog
      title="登录"
      width="370px"
      :visible.sync="loginFormVisible"
    >
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-position="top"
      >
        <el-form-item
          label="手机号"
          prop="tel"
        >
          <el-input
            v-model="loginForm.tel"
            autocomplete="off"
            maxlength="11"
            placeholder="请输入手机号"
            @input="onSecurityTel"
          ></el-input>
            </el-form-item>
            <el-form-item
              label="验证码"
              prop="code"
            >
              <el-input
                v-model="loginForm.code"
                autocomplete="off"
                placeholder="请输入验证码"
              ></el-input>
                <el-button
                  class="getCode"
                  type="text"
                  @click="getCode"
                  :disabled="getCodeStatus"
                >{{getCodeTxt}}</el-button>
                  </el-form-item>
                  <el-form-item label="邀请码(选填)">
                    <el-input
                      v-model="loginForm.inviteCode"
                      autocomplete="off"
                      placeholder="请输入邀请码"
                    ></el-input>
                  </el-form-item>
                  </el-form>
                  <div
                    slot="footer"
                    class="dialog-footer"
                  >
                    <el-button
                      type="primary"
                      :loading="loginLoading"
                      @click="loginBtn"
                    >登 录</el-button>
  </div>
  </el-dialog>
  </div>
  </div>
</template>

<script>
import { setTimeout, setInterval, clearInterval } from 'timers'
import { loginReq } from '@/api'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'HeaderTop',
  components: {},
  data() {
    return {
      storageToken: localStorage.getItem('userToken'),
      loginFormVisible: false,
      loginLoading: false,
      getCodeStatus: true,
      getCodeTxt: '获取验证码',
      loginForm: {
        tel: '',
        code: '',
        inviteCode: ''
      },
      loginRules: {
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[34578]\d{9}$/,
            message: '请输入正确手机号',
            trigger: 'blur'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState(['userToken'])
  },
  methods: {
    ...mapActions(['saveUserToken']),
    async login() {
      const res = await loginReq({ phone: '123' })
      this.saveUserToken(res.token)
      localStorage.setItem('userToken', res.token)
    },
    onSecurityTel() {
      this.$refs.loginForm.validateField('tel', errMsg => {
        if (errMsg) {
          this.getCodeStatus = true
        } else {
          this.getCodeStatus = false
        }
      })
    },
    getCode() {
      this.getCodeStatus = true
      this.$message.success('请注意查收验证码')
      let time = 10
      const T = setInterval(() => {
        time--
        if (time <= 0) {
          this.getCodeStatus = false
          this.getCodeTxt = '获取验证码'
          clearInterval(T)
        } else {
          this.getCodeTxt = `${time}s后重新获取`
        }
      }, 1000)
    },
    loginBtn() {
      this.loginLoading = true
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.login()
          this.loginFormVisible = false
          setTimeout(() => {
            this.loginLoading = false
            this.$message.success('登陆成功')
          }, 100)
        } else {
          this.loginLoading = false
          return false
        }
      })
    },
    loginOut() {
      this.$msgbox
        .confirm('确认退出登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        .then(() => {
          localStorage.setItem('userToken', '')
          this.saveUserToken('')
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.headerWrap {
  height: 72px;
}
.header {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  .containerWid {
    display: flex;
    justify-content: space-between;
    .hleft {
      display: flex;
      .logo {
        display: inline-block;
        height: 72px;
        width: 200px;
        background: url(../assets/img/logo1.png) center center no-repeat;
        background-size: 180px;
        img {
          height: 100%;
        }
      }
      .header-menu {
        a {
          display: inline-block;
          height: 72px;
          line-height: 72px;
          padding: 0 20px;
          font-size: 16px;
          color: #4d555d;
          &:hover {
            color: #1c1f21;
          }
        }
      }
      .searchBox {
        position: relative;
        height: 40px;
        padding-right: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        background: #e9e9e9;
        border-radius: 8px;
        margin: 16px 0;
        width: 324px;
        box-sizing: border-box;
        margin-left: 50px;
        input {
          box-sizing: border-box;
          padding: 8px 12px;
          font-size: 14px;
          line-height: 24px;
          height: 40px;
          width: 100%;
          float: left;
          border: 0;
        }
        .searchBtn {
          position: absolute;
          right: 0;
          top: 0;
          width: 40px;
          height: 40px;
          @include center();
          i {
            font-size: 18px;
            font-weight: bold;
            color: #545c63;
          }
        }
      }
    }
    .hright {
      display: flex;
      .sc {
        display: flex;
        align-items: center;
      }
      span {
        display: inline-block;
        height: 72px;
        line-height: 72px;
        padding: 0 12px;
        font-size: 14px;
        color: #4d555d;
        &:hover {
          color: #1c1f21;
        }
      }
      .login {
        cursor: pointer;
      }
      .userFace {
        display: inline-block;
        height: 100%;
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
    }
  }
}
.loginBox {
  .el-dialog__body {
    padding: 0 30px 15px 30px;
  }
  .el-form--label-top {
    .el-form-item__label {
      padding: 0;
    }
  }

  .el-form-item {
    margin-bottom: 10px;
  }
  .el-dialog__footer {
    padding: 0 30px 30px;
    button {
      width: 100%;
    }
  }
  .getCode {
    position: absolute;
    right: 0;
    border-left: 1px solid #e5e5e5 !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.userUl {
  li {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    text-align: center;
    a {
      color: #4d555d;
    }
    &:hover,
    a:hover {
      color: #ff3333;
    }
  }
}
</style>
